<template>
	<div ref="fullCalendar"></div>
</template>
<script setup lang="ts">
import '@fullcalendar/core/vdom'; // solve problem with Vite
import { CalendarOptions, Calendar } from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import listPlugin from '@fullcalendar/list';
import { calendarProps } from './calendar';
import { Ref } from 'vue';
import { IParam } from '@/core';
import { useI18n } from 'vue-i18n';
const props = defineProps(calendarProps);

const emit = defineEmits<{
	(name: 'clickEvent', args: IParam): void;
	(name: 'renderEvent', args: IParam): void;
	(name: 'getEvents', args: IParam, callback: Function): void;
}>();

/**
 * 当前组件dom
 */
const fullCalendar: Ref<HTMLElement | null> = ref(null);

/**
 * 当前fullCalendar组件
 */
const fullCalendarRef: Ref<IParam | null> = ref(null);

/**
 * 点击
 */
const handleEventClick = (args: IParam) => {
	emit('clickEvent', args);
};

/**
 * 获取日历events
 */
const getEvents = (args: IParam, callback: any) => {
	emit('getEvents', args, callback);
};

const renderEvent = (args: IParam) => {
	emit('renderEvent', args);
};

const { locale } = useI18n();

const calendarLocale = computed(() => {
	switch (locale.value) {
		case 'zh_CN':
			return 'zh-cn';
		case 'en':
			return 'en';
		default:
			return 'zh-cn';
	}
});

/**
 * fullCalendar配置
 */
const calendarOptions: CalendarOptions = {
	// 语言
	locale: calendarLocale.value,
	// 插件
	plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
	// 设置各种按钮的文字
	buttonText: {
		today: App.ts('widget.calendar.today', '今天'),
		month: App.ts('widget.calendar.month', '月'),
		week: App.ts('widget.calendar.week', '周'),
		day: App.ts('widget.calendar.day', '天'),
		list: App.ts('widget.calendar.list', '列'),
	},
	// 全天行的文本显示内容
	allDayText: '全天',
	// 按钮: dayGridMonth月 timeGridWeek周 timeGridDay日 listMonth列
	headerToolbar: {
		left: 'prev,next today',
		center: 'title',
		right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth',
	},
	// 视图类型 初始显示的视图
	initialView: props.store.defaultView,
	// 初始事件
	events: getEvents,
	// 导航链接
	navLinks: props.store.quickToolbarItems.length > 0 ? true : false,
	// 设置一周中显示的第一天是哪天
	firstDay: 1,
	// 可编辑
	editable: true,
	// 显示周末
	weekends: true,
	// 有效日期
	validRange: {
		start: '0000-01-01',
		end: '9999-12-31',
	},
	// 日程点击事件
	eventClick: handleEventClick,
	// 自定义日程
	eventDidMount: renderEvent,
};

onMounted(() => {
	if (fullCalendar.value) {
		const calendar = new Calendar(fullCalendar.value, calendarOptions);
		calendar.render();
		fullCalendarRef.value = calendar;
		fullCalendar.value;
	}
});

/**
 * 当前fullCalendar宽度
 */
const fullCalendarWidth = ref(0);

/**
 * 监听当前fullCalendar宽度，发生变化时重绘
 */
const stop = watchEffect(() => {
	const ro = new ResizeObserver((entries) => {
		// 遍历改变的元素属性
		for (let entry of entries) {
			const width = entry.target.getBoundingClientRect().width;
			if (fullCalendarWidth.value !== width) {
				fullCalendarRef.value?.updateSize();
				fullCalendarWidth.value = width;
			}
		}
	});
	if (fullCalendar.value) {
		ro.observe(fullCalendar.value);
	}
	return () => {
		ro.disconnect();
	};
});

onUnmounted(() => {
	stop();
});

defineExpose({ fullCalendarRef });
</script>
